<template>
  <view class="indexPage">
    <view class="top-bg"></view>
    <!-- 导航栏 -->

    <s-nav-bar title="订单列表" statusBar back></s-nav-bar>
    <scroll-view class="main-scroll" scroll-y @scrolltolower="reachBottom" refresher-enabled
      :refresher-triggered="refreshing" @refresherrefresh="handleRefresh">
      <view class="message-content-list">
        <view class="message-card">
          <view class="card-header">
            <view class="card-icon">
              <image mode="widthFix" class="dingdan" src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/dingdan.png" />
            </view>
            <view class="card-title">新增订单</view>
          </view>
          <view class="card-content">
            <view class="content-item"><span class="label">执行日期：</span><span class="value">2025/08/20 - 2025/09/05</span>
            </view>
            <view class="content-item"><span class="label">类型：</span><span class="value">婚礼</span><span class="label"
                style="margin-left:20px;">天数：</span><span class="value">1天</span></view>
            <view class="content-item"><span class="label">服务项目：</span><span class="value">后期制作</span></view>
            <view class="content-item"><span class="label">任务薪资：</span><span class="value">600</span></view>
            <view class="content-item"><span class="label">分配人：</span><span class="value">张三丰</span></view>
            <view class="content-item"><span class="label">创建时间：</span><span class="value">2025/06/27 21:30</span></view>
          </view>
          <view class="card-footer"><button class="confirm-btn">确认订单</button></view>
        </view>
        <view class="message-card">
          <view class="card-header">
            <view class="card-icon">
              <image mode="widthFix" class="dingdan" src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/dingdan.png" />
            </view>
            <view class="card-title">新增订单</view>
          </view>
          <view class="card-content">
            <view class="content-item"><span class="label">执行日期：</span><span class="value">2025/08/20 - 2025/09/05</span>
            </view>
            <view class="content-item"><span class="label">类型：</span><span class="value">婚礼</span><span class="label"
                style="margin-left:20px;">天数：</span><span class="value">1天</span></view>
            <view class="content-item"><span class="label">服务项目：</span><span class="value">后期制作</span></view>
            <view class="content-item"><span class="label">任务薪资：</span><span class="value">600</span></view>
            <view class="content-item"><span class="label">分配人：</span><span class="value">张三丰</span></view>
            <view class="content-item"><span class="label">创建时间：</span><span class="value">2025/06/27 21:30</span></view>
          </view>
          <view class="card-footer"><button class="confirm-btn">确认订单</button></view>
        </view>
        <view class="message-card">
          <view class="card-header">
            <view class="card-icon">
              <image mode="widthFix" class="dingdan" src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/dingdan.png" />
            </view>
            <view class="card-title">新增订单</view>
          </view>
          <view class="card-content">
            <view class="content-item"><span class="label">执行日期：</span><span class="value">2025/08/20 - 2025/09/05</span>
            </view>
            <view class="content-item"><span class="label">类型：</span><span class="value">婚礼</span><span class="label"
                style="margin-left:20px;">天数：</span><span class="value">1天</span></view>
            <view class="content-item"><span class="label">服务项目：</span><span class="value">后期制作</span></view>
            <view class="content-item"><span class="label">任务薪资：</span><span class="value">600</span></view>
            <view class="content-item"><span class="label">分配人：</span><span class="value">张三丰</span></view>
            <view class="content-item"><span class="label">创建时间：</span><span class="value">2025/06/27 21:30</span></view>
          </view>
          <view class="card-footer"><button class="confirm-btn">确认订单</button></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  onLoad() {
  },
  onShow() {
  },
  methods: {
  },
};
</script>
<style lang="less" scoped>
.indexPage {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.main-scroll {
  flex-grow: 1;
  height: 0;
  box-sizing: border-box;
  padding-top: 20rpx;
}

.message-content-list {
  padding: 20px;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  overflow-y: auto;
  padding: 0 20upx;
  box-sizing: border-box;

  .confirm-btn {
    background: var(--v-linear);
    color: white;
  }

  .content-item {
    display: flex;
    margin-bottom: 12px;
    font-size: 14px;

    .label {
      color: #666;
      width: 80px;
      flex-shrink: 0;
      text-align: right;
    }

    .value {
      color: #323335;
      font-weight: 500;
    }
  }

  .message-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px #0000000f;
    min-width: 100%;
    box-sizing: border-box;

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f0f0f0;

      .card-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: linear-gradient(135deg, #73d1f3, #5e91ef);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;

        .dingdan {
          width: 60%;
          display: block;
        }
      }
    }
  }
}
</style>